<template>
    <div class="category">
        <teleport  to='.header'>
            <van-nav-bar class="home-header" left-arrow @click-left="$router.back()">
                <template #title>
                    <van-search class="search" shape="round" placeholder="搜索.." background="transparent" />
                </template>
            </van-nav-bar>
        </teleport>
        <div class="category-list">

            <!-- 
                v-model:自定义参数="绑定数据"
                自定义参数 默认为modelValue => 只能有一个,可以省略不写
            
            -->
            <!-- <AsideMenu ref="myMenu" :a="a"  @update:a="updateA" :b="2" :x="1" :y="2" v-model="category">
                插槽内容
                <template #a>
                    aaaa
                </template>
                <template #b>
                    bbbb
                </template>
            </AsideMenu> -->

            <AsideMenu ref="myMenu" v-model="category"></AsideMenu>
        </div>
        <div class="category-brand">
            {{ a }}
            {{ category }}
            <GridList v-model="category"></GridList>
        </div>
    </div>
</template>

<script setup lang="ts">
    import AsideMenu from "./component/AsideMenu.vue"
    import GridList from "./component/GridList.vue"

    import {ref} from "vue";

    let category = ref(null);  // category 分类,如果不设置,默认为分类列表中的第一个, 如果设置了,为分类列表中的指定的那一个
    let a = ref(1);
    let myMenu = ref(null);

    let updateA = (v:any)=>{
        console.log("update:a被调用了");
        a.value = v;
    }

    setTimeout(()=>{
       console.log(777,  myMenu.value);
       console.log(777,  (myMenu.value as any)?.getActiveCategory());
    },1000)

</script>

<style lang="scss" scoped>
.category {
    width: 100%;

    display: flex;

    .category-list {
        overflow-y: auto;
    }

    .category-brand {
        flex: 1;
        overflow-y: auto;
    }




}
</style>